import React, {Component} from 'react';
import Swiper from "../components/swiper";
import ShopList from "../components/shopList";
import Goods from "../components/goods";
import Commodity from "../components/commodity";
import {Icon} from "antd";
import {Link} from "react-router-dom";
import throttle from 'lodash/throttle';
class Homepage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            backGround: "rgba(0, 0, 0, 0)"
        }
        this.handleScroll = throttle(this.handleScroll, 300);
    }
    render() {
        return (
            <div>
                <header style={{background: this.state.backGround}}>
                    <span>
                        <Icon type="unordered-list"/>
                    </span>
                    <div className="seachInput">
                        <Icon type="search"/>
                        <input type="text" placeholder="输入喜欢的宝贝名称"/>
                    </div>
                    <span>
                        <Link to="/login">登陆</Link>
                    </span>
                </header>
                <section>
                    <Swiper></Swiper>
                    <ShopList></ShopList>
                    <Goods></Goods>
                    <Commodity></Commodity>
                </section>
            </div>
        );
    }
    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
    }

    handleScroll = (event) => {
        //滚动条高度
        let ctx = this;
        let scrollTop = document.documentElement.scrollTop;  //滚动条滚动高度
        if (scrollTop > 100) {
            ctx.setState({
                backGround: "linear-gradient(to bottom,#eb1625 0%,rgba(255, 255, 255, 0) 100%)"
            })
        } else {
            ctx.setState({
                backGround: "rgba(0, 0, 0, 0)"
            })
        }
    }
}

export default Homepage;